<template>
    <div class="system-add-dept-container">
        <el-drawer
                title="新增${tableComment}"
                v-model="showWindows"
                @close="onCancel"
        >
            <el-form
                    ref="formRef"
                    :model="${tableName1}"
                    :rules="rules"
                    size="small"
                    label-width="30%"
                    style="width: 90%"
            >
                <#list dtofields as field>
                    <el-form-item label="${field.fieldComment}" prop="${field.fieldName}">
                        <el-input v-model="${tableName1}.${field.fieldName}" placeholder="请输入${field.fieldComment}"/>
                    </el-form-item>
                </#list>
            </el-form>
            <div class="el-drawer__footer">
                <el-button @click="onCancel" size="small">取 消</el-button>
                <el-button type="primary" @click="onSubmit" size="small">新 增</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script lang="ts">
    import {reactive, ref, toRefs} from "vue";
    import {add${tableName}} from "/@/api/${tableName1}/index";
    import {ElMessage} from "element-plus";

    export default {
        name: "add${tableName}",
        emits: ['initTableData'],
        props: {},
        setup(props, context) {

            const formRef = ref()

            const state = reactive({
                showWindows: false,
                ${tableName1}: {
                    <#list dtofields as field>
                    ${field.fieldName}: '',
                    </#list>
                },
                rules: {
                    <#list dtofields as field>
                    ${field.fieldName}: [
                        {required: true, message: '请输入${field.fieldComment}', trigger: 'blue'}
                    ],
                    </#list>
                }
            })

            //打开添加窗口
            const openWindows = () => {
                state.showWindows = true
            }

            //取消
            const onCancel = () => {
                formRef.value.resetFields()
                state.showWindows = false
            }

            //提交
            const onSubmit = () => {
                formRef.value.validate((valid: any) => {
                    if (valid) {
                        add${tableName}(state.${tableName1}).then((res: any) => {
                            if (res.code == 200) {
                                onCancel()
                                context.emit('initTableData')
                            } else {
                                ElMessage.error(res.message)
                            }
                        })
                    }
                })
            }


            return {
                formRef,
                openWindows,
                onCancel,
                onSubmit,
                ...toRefs(state)
            }
        },

    }
</script>

<style scoped>

</style>